<!--后台根页面，固定side和header部分，在main部分实现界面切换-->

<template>
  <!--只能有一个div根节点-->
  <div>
    <el-container>
      <!--侧边框-->
      <el-aside style="width: 220px; min-height: 100vh; background-color: rgba(0,21,41,1)">
        <div
            style="height: 80px; color: white; display: flex; align-items: center; justify-content: center; font-size: larger">
          <img src="../views/img/my_logo.jpg" alt="" style="width: 75px; height: 75px; padding-top: 4px">
          <span style="padding-left: 5px; font-size: larger">产品认证</span>

        </div>

        <el-menu style="border: none; background-color: rgba(0,21,41,1);" text-color="rgba(255,255,255,0.65)"
                 active-text-color="#fff" :default-active="$route.path" router>

          <el-menu-item index="/home" class="el-icon-house" style="width: 200px; font-size: medium; padding-left: 21px;
           align-items: center; justify-content: center">
            &nbsp;系统首页
          </el-menu-item>

          <el-menu-item class="el-icon-s-data"
                        style="width: 200px; font-size: medium; padding-left: 21px; align-items: center;
                        justify-content: center;" index="/statistics">
            &nbsp;数据统计
          </el-menu-item>

          <el-submenu index="/userOperation">
            <template slot="title">
              <i class="el-icon-user"></i>
              <span style="font-size: medium;">用户操作</span>
            </template>
            <el-menu-item style="padding-left: 60px" index="/input">录入产品</el-menu-item>
            <el-menu-item style="padding-left: 60px" index="/delay">delay处理</el-menu-item>
            <el-menu-item style="padding-left: 60px" index="/approve">审批</el-menu-item>
            <el-menu-item style="padding-left: 60px" index="/thirdParty">第三方认证</el-menu-item>
          </el-submenu>

          <el-menu-item class="el-icon-user-solid"
                        style="width: 200px; font-size: medium; padding-left: 21px; align-items: center;
                        justify-content: center;" index="/statistics" @click="$router.push('/userManage')">
            &nbsp;用户管理
          </el-menu-item>


          <el-menu-item class="el-icon-message-solid"
                        style="width: 200px; font-size: medium; padding-left: 21px; align-items: center;
                        justify-content: center;" index="/information">
            &nbsp;消息中心
          </el-menu-item>

        </el-menu>

      </el-aside>

      <el-container>
        <!--头部-->
        <el-header style="display: flex; align-items: center; padding-left: 3px; background-color: #42b983 ">
          <i class="el-icon-s-unfold" style="margin-left: 10px; font-size: 26px"></i>
          <el-breadcrumb separator-class="el-icon-arrow-right" style="margin-left: 20px">
            <el-breadcrumb-item :to="{path:'/element'}">系统首页</el-breadcrumb-item>
            <el-breadcrumb-item :to="{path:'/data'}">数据统计</el-breadcrumb-item>
          </el-breadcrumb>

          <div style="flex: 1; width: 0; display: flex; align-items: center; justify-content: flex-end">
            <i class="el-icon-quanping_o" style="font-size: 26px; margin-right: 20px" @click="handleFullScreen"></i>

            <i class="el-icon-user-solid" style="font-size: 26px; margin-right: 5px;"></i>
            <el-dropdown split-button type="info" @click="handleClick" placement="bottom">
              用户中心
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item @click.native="$router.push('/maintainInfo')">信息维护</el-dropdown-item>
                <el-dropdown-item @click.native="$router.push('/login')">退出登录</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>

          </div>

        </el-header>
        <!--主体部分-->
        <el-main style="border-radius: 5px; box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04)">
          <!--子路由-->
          <router-view/>


        </el-main>
      </el-container>

    </el-container>
  </div>
</template>

<script>

import axios from "axios";  //前端通过axios发送HTTP请求和后端交互数据
import request from "../utils/request";

import Input from "@/views/managerView/Input";

export default {
  name: 'HomeView',

  data() {
    return {
      users: [], //用户信息
      user: { //登录的用户
        username:'',

      }
    }
  },

  mounted() { //页面加载完成之后触发
    /*axios.get('http://localhost:8080/user/selectAll').then(res => {
      console.log(res.data)
      this.users = res.data.data
    })*/

    request.get('/user/selectAll').then(res => {
      this.users = res.data
    })
  },

  methods: {
    //全屏
    handleFullScreen() {
      document.documentElement.requestFullscreen()
    },

    //点击用户中心事件
    handleClick() {
      this.$message.warning('修改个人信息后不可恢复')
    },

    //点击测试项目经理-录入产品事件
    /*handleInput() {
      request.get('/product/selectAll').then(res => {
        Input.proInfo = res.data
      })*/

  }

}
</script>

<style>

/*此边框样式调整*/
.el-menu--inline, .el-menu-item {
  background-color: #000c17 !important;
  /*margin: 4px !important;*/
}

.el-menu-item {
  margin: 4px !important;
  border-radius: 5px !important;
}

.el-menu--inline {
  margin: 1px !important;
  border-radius: 5px !important;
}


.el-menu--inline:hover, .el-menu-item:hover {
  background-color: #0c8cff !important;
  border-radius: 5px;
}

.el-submenu:hover, .el-submenu__title:hover {
  text-emphasis-color: black;
  background-color: rgba(0, 21, 41, 1);
  border-radius: 5px;
}

.el-header {
  box-shadow: 2px 0 6px rgba(0, 21, 41, .35);
}

</style>